<template>
  <div class="server-body" :style="borderStyle">
    <div class="server-header-query">
      <div class="header-query-Body">
        <div class="query-body">
          <input
            v-model="query.blurry"
            :style="borderStyle"
            placeholder="搜索您需要的服务 / Search Service"
            @click="queryObject"
          >
          <div class="query-button" @click="queryObject">
            <i class="el-icon-search" />
          </div>
        </div>
      </div>
    </div>
    <div class="header-query-lab" :style="borderStyle">
      <query-item
        v-for="(item, index) in queryList"
        :key="'query-' + index"
        :layout="layout"
        :params="item"
        @call-back="queryClick"
      />
    </div>
    <div class="server-content-body">
      <el-scrollbar
        style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
      >
        <el-empty
          v-if="dataList === null || dataList.length === 0"
          :image-size="100"
        />
        <div v-else class="content-body" :style="borderStyle">
          <div
            v-for="(item, index) in dataList"
            :key="'t-' + index"
            class="server-content-article"
          >
            <div class="server-header" :style="borderStyle">
              <!--              <div class="server-dialog" :style="titleStyle">
                  {{ item.bmmc.substr(0, 1) }}
                </div>-->
              <div
                class="server-title"
                style="font-size: 16px;font-weight: bolder"
              >
                {{ item.bmmc }}
              </div>
              <div v-if="item.dataList" class="server-span">
                {{ "共：" + item.dataList.length + "个" }}
              </div>
              <div v-else class="server-span">0</div>
            </div>
            <div class="server-body-ul">
              <div
                v-for="(obj, index) in item.dataList"
                :key="'s-' + index"
                :style="customWidth"
                class="custom-el-row"
              >
                <!--  -->
                <el-col class="cord">
                  <a :href="obj.openUrl">
                    <div class="mask">
                      <div>开始办理</div>
                    </div>
                  </a>
                  <el-card
                    class="my-card"
                    body-style="padding:5px"
                    shadow="hover"
                    :style="borderStyle"
                  >
                    <div v-if="obj.sfzx" class="absolute-title news">新</div>
                    <div v-else-if="obj.sftj" class="absolute-title recommend">
                      荐
                    </div>
                    <div
                      v-else-if="obj.fwlx === '1_1'"
                      class="absolute-title handle"
                    >
                      办
                    </div>
                    <div v-else class="absolute-title query">查</div>
                    <div class="absolute-rate-li">
                      <el-rate
                        :value="builderRate(obj)"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}"
                      />
                    </div>
                    <div class="card-body ">
                      <div class="card-image">
                        <img :src="baseURL + obj.pcIcon">
                      </div>
                      <div class="card-server-ul">
                        <div class="card-server-li">{{ obj.name }}</div>
                        <div class="card-server-li-ts">
                          访问量：<label>{{
                            obj.fwcs == null ? 0 : obj.fwcs
                          }}</label>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </div>
              <div class="line-height" style="clear: both" />
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import QueryItem from './slot/item'
import { getToken } from '@/utils/auth'
import {
  queryAllServiceNoAuthByOrganization,
  queryAllServiceAuthByOrganization
} from '@/api/portal/manager/setting/index'
export default {
  name: 'OfficeHallPcNoInfo', // 办事大厅模块
  components: { QueryItem },
  props: {
    temp: {
      type: Object,
      default() {
        return {}
      }
    },
    layout: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dataList: [],
      column: [],
      queryList: [],
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      query: {
        blurry: ''
      },
      customStyle: {},
      titleStyle: {},
      borderStyle: {},
      customWidth: { width: '25%' },
      setting: []
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData
        // console.log(this.customStyle);
        this.titleStyle = {
          backgroundColor: newData.mrlb, // 默认栏目颜色
          opacity: newData.tmd
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        console.log('new', newData)
        this.query = {
          blurry: ''
        }
        if (
          newData.data !== undefined &&
          newData.data !== null &&
          newData.data !== ''
        ) {
          const pzx = JSON.parse(newData.data.pzx)
          this.column = pzx

          this.setting = pzx
        } else {
          const pzx = JSON.parse(newData.pzx)
          this.column = pzx
          this.setting = pzx
        }
        console.log('测试', this.column)
        const width = (100 / this.column.row).toFixed(2)
        this.customWidth.width = width + '%'
        if (undefined !== this.column.query && this.column.query !== null) {
          this.queryList = this.column.query
        } else {
          this.queryList = []
        }
        this.initData()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        console.log(val)
        this.$nextTick(() => {
          this.borderStyle.borderRadius = val.bkdx
          // if (this.temp.sfxsbk === true) {
          //   this.borderStyle.border = "1px solid " + val.bkys;
          // }
          // if (this.temp.bkyy === true) {
          //   this.borderStyle.boxShadow = "0 2px 4px rgba(0, 0, 0, .12)";
          // }
          this.borderStyle.background = val.columnGroundColor
          this.borderStyle.color = val.fontColor
          this.borderStyle = Object.assign({}, this.borderStyle)
        })
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    queryObject() {
      this.initData()
    },
    initData() {
      if (getToken()) {
        queryAllServiceAuthByOrganization(this.query)
          .then(res => {
            const { data } = res
            this.dataList = data.data
          })
          .catch(() => {
            this.dataList = []
          })
      } else {
        queryAllServiceNoAuthByOrganization(this.query)
          .then(res => {
            const { data } = res
            this.dataList = data.data
          })
          .catch(() => {
            this.dataList = []
          })
      }
    },
    builderRate(data) {
      if (data !== null && data.ratesum !== null) {
        return parseFloat((data.ratesum / (data.ratecount * 4)).toFixed(3))
      } else {
        return 5
      }
    },
    queryClick(obj) {
      this.query[obj.code] = obj.value
      this.initData()
    }
  }
}
</script>

<style scoped>
.server-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 10px;
  box-sizing: border-box;
}
.server-header-query {
  flex: 0 1 auto;
  height: 70px;
}
.server-content-body {
  flex: 1 1 auto;
  overflow: hidden;
}
.header-query-Body {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding: 10px 0px;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
}
.query-body {
  width: 500px;
  height: 50px;
  line-height: 40px;
  margin: 0 auto;
  padding: 5px 50px 5px 20px;
  box-sizing: border-box;
  border-radius: 25px;
  border: 1px solid #409eff;
  position: relative;
}

.query-button {
  width: 60px;
  height: 49px;
  background-color: #409eff;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: 0px 25px 25px 0px;
  line-height: 49px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bolder;
}
.query-button:hover {
  background-color: #66b1ff;
}
.query-body input {
  width: 100%;
  height: 40px;
  border: none;
  outline: none;
}
.header-query-lab {
  width: 100%;
}

.query-span > span {
  padding: 3px 5px;
  box-sizing: border-box;
  cursor: pointer;
  color: #2c3e50;
}

.query-span.active > span,
.query-span:hover > span {
  border-radius: 2px;
  background-color: #173e7f;
  color: #ffffff;
}
.server-content-article {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 3px;
}

.server-header {
  height: 40px;
  line-height: 40px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ebebeb;
  background-color: #ecf8ff;
  display: flex;
  flex-flow: row nowrap;
}

.server-dialog {
  position: absolute;
  top: -11px;
  left: -16px;
  width: 40px;
  height: 30px;
  line-height: 45px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  background-color: #173e7f;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); /* IE 9 */
  -moz-transform: rotate(-45deg); /* Firefox */
  -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  -o-transform: rotate(-45deg);
}

.server-title {
  flex: 0 1 auto;
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
}
.server-span {
  flex: 0 1 auto;
  height: 40px;
  line-height: 40px;
  padding: 0px 20px;
  box-sizing: border-box;
  color: #909399;
  font-size: 13px;
}
.cord {
  margin-top: 12px;
  cursor: pointer;
  position: relative;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8eaed9ed;
  color: #ffffff;
  opacity: 0;
  z-index: 1;
}
.mask div {
  text-align: center;
  height: 100%;
  line-height: 5;
  font-weight: 800;
}
.cord a:hover .mask {
  opacity: 1;
}
.server-body-ul {
  padding: 0px 12px;
  box-sizing: border-box;
}

.my-card {
  position: relative;
  overflow: hidden;
}

.line-height {
  width: 100%;
  height: 12px;
}

.card-body {
  width: 100%;
  height: 80px;
  position: relative;
}

.recommend {
  background-color: #f56c6c;
}

.hots {
  background-color: #e6a23c;
}

.news {
  background-color: #67c23a;
}

.query {
  background-color: #409eff;
}

.handle {
  background-color: #009688;
}

.absolute-title {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  line-height: 62px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
}

.absolute-rate {
  position: absolute;
  bottom: -20px;
  right: -19px;
  width: 40px;
  height: 40px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  background-color: #ff5722;
}

.absolute-collect {
  position: absolute;
  right: -5px;
  top: -1px;
  height: 28px;
  width: 30px;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  text-align: center;
}

.absolute-rate-li {
  position: absolute;
  left: 80px;
  bottom: 2px;
  right: 0px;
  height: 18px;
  line-height: 30px;
}

.el-rate >>> .el-rate__icon {
  margin-right: 2px;
}

.card-image {
  width: 80px;
  height: 80px;
  padding: 10px;
  box-sizing: border-box;
}

.card-image > img {
  width: 100%;
  left: 0px !important;
  transform: none !important;
}

.card-server-ul {
  position: absolute;
  top: 10px;
  right: 5px;
  bottom: 10px;
  left: 80px;
  overflow: hidden;
}

.card-server-li {
  width: 100%;
  height: 30px;
  line-height: 15px;
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}

.card-server-li-ts {
  width: 100%;
  height: 30px;
  line-height: 23px;
  font-size: 12px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-el-row {
  width: 20%;
  float: left;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
